Título del blog



Los menús son una pieza clave en cualquier blog, ayudan al visitante a navegar mejor por la página y al mismo tiempo dan un aspecto más organizado.
En Vagabundia vi el otro día un menú vertical muy vistoso creado con CSS mi debilidad, porque todo lo que no requiere alojar archivos externos siempre nos dará mejor resultado tanto para personalizar como para el tiempo de carga de la página.
De la misma página que proporciona J.Miur me ha gustado mucho este otro menú, es Simple Tabs y como su nombre indica es un menú creado con tabs lo que comúnmente conocemos por pestañas.

Para añadirlo a nuestro blog necesitaremos situarnos en Edición de HTML y justo antes de ]]></b:skin> añadimos lo siguiente:

[+/-]Ver código
    h1#cst a {
    color : #fff;
    display : block;
    width : 600px;
    height : 150px;
    padding : 10px;
    background : #669900 url(http://img120.imageshack.us/img120/9563/cstmastheadzn6.jpg) no-repeat bottom right;
    border : 1px solid #000;
    text-decoration : none;
    font-size : 90%;
    font-weight : normal;
    margin : auto;
    }
    ul.cst {
    margin : auto;
    width : 600px;
    }
    h1#cst a:hover, h1#cst a:focus, h1#cst a:active {
    color : #414C32;
    }
    h1#cst a:focus, h1#cst a:active {
    text-decoration : underline;
    }
    ul.cst li {
    display : inline;
    float : left;
    }
    h1#cst {
    margin: 0 !important;
    }

    ul.cst li a, ul.cst li.on {
    background : #e5cb7d url(http://img389.imageshack.us/img389/4155/cstshadowovergc9.jpg) repeat-x top left;
    border : 1px solid #333;
    border-top : 0;
    color: #758B62;
    cursor: pointer;
    display: block;
    height: 32px;
    line-height: 32px;
    margin: 0 2px 0;
    padding: 0 8px 0 18px;
    text-align:center;
    text-decoration:none;
    white-space:nowrap;
    width:auto;
    }

    ul.cst li.on {
    background-color:#669900;
    background-image:none;
    border: 1px solid #000;
    border-top: 1px solid #669900;
    color:#FFFFFF;
    cursor:default;
    margin-top:0;
    white-space:nowrap;
    margin-top: -1px;
    height: 33px;
    }

    ul.cst li a:hover, ul.cst li a:focus, ul.cst li a:active {
    color : #000;
    ul.cst li a:focus, ul.cst li a:active {
    text-decoration : underline;
    }



En este código que añadimos a la plantilla es donde podemos modificar algunas cosas del menú por ejemplo la imagen, la original mide 600x150 y la podemos sustituir en "h1#cst a" donde background :#669900 url(http://img120.imageshack.us/img120/9563/cstmastheadzn6.jpg) aunque no se aprecia hay un color de fondo en tono verde igual a la imagen del menú que podemos cambiar en :#669900.

Si decidimos cambiar la imagen del menú seguramente también nos gustaría modificar el color de la 2ª tabs, lo haremos en "ul.cst li.on" donde background-color : #669900;
Las otras tabs las podríamos modificar en "ul.cst li a, ul.cst li.on" donde dice background : #ffffdd.

Hay otra imagen en el menú, es la sombra que produce el efecto hover en las tabs la encontraremos en:
ul.cst li a:hover, ul.cst li a:focus, ul.cst li a:active {
color : #000;background : #e5cb7d url(http://img389.imageshack.us/img389/4155/cstshadowovergc9.jpg) repeat-x top left;
}

Las medidas las podemos adecuar a nuestro gusto en h1#cst a variando width:600px; y
height:150px; teniendo cuidado que entonces añadiremos en "ul.cst" el mismo valor de width que en "h1#cst" con padding lo que haremos aumentar en alto de la imagen.

Guardamos los cambios y nos situamos en Plantilla/Añadir gadget /HTML/Javascript incluimos en su interior el siguiente código:

<h1 id="cst"><a href="url-enlace">Título del blog</a></h1>
<ul class="cst">
<li><a href="url-enlace">Page 1</a></li>
<li class="on">Page 2</li>
<li><a href="url-enlace">Page 3</a></li>
<li><a href="url-enlace">Page 4</a></li>
<li><a href="url-enlace">Page 5</a></li>
</ul>

Donde "url-enlace" añadiremos la url de la página que vamos a enlazar.
En la pestaña nº2 donde dice "on" no añadiremos nada.
El texto de Page 1-3-4-5 lo sustituimos por el texto a enlazar.
El menú con las medidas proporcionadas queda más o menos así.



Anónimo

Gema, en cualquiera de los post que publico, ¿sabes cómo hacer que la categoría de comentarios y etiquetas, aparezcan en la misma linea de texto? Tal que así. (el blog de mi amigo Jesús) http://carnabys.blogspot.com/

Responder
Anónimo

hola cariño, creo que lo voy a implentar, ya está siendo hora que lo haga!!!...y como bien dices (ojo al piojo que estoy aprendiendo) trabajar con CSS me dá tranquilidad, porque si le adjuntas (no sé como se dice) librerías...qué pasa cuando no funcionan más???...lo que tanto me ha costado se vá sin decir adiós jajaja...besitos!!!

Responder
Anónimo

Creo que voy a aplicar este menú a mi blog (los colores me gustan mucho) y parece sencillo de instalarlo :)

Por cierto, Gem@, mira este post, me pareció interesante ,¿qué opinas?

Besotes Gem@ y gracias por enseñarnos lo que sabes

Responder
Gem@

Le Petit Ecolier si te sitúas en plantilla de diseño verás que en el espacio de las entradas dices "Enytadas del blog" un poco más abajo hay un enlace EDITAR
Si accedes a ese enlace puedes configurar las entradas del blog, lo que marques aparecerá en las entradas, el orden en que aparece lo puedes cambiar arrastrando las etiquetas y dejandolas en la misma línea ;)

Hola Graciela eso es lo qu eme gusta más de él que no requiere alojar archivos. Es un menú que con una bonita imagen queda elegante ya me avisarás que lo vea :)


Hola G me parece estupendo ese enlace, lo probaré para ver que tal funciona.
Gracias :) :)

Responder
Jaime Trujillo Escobedo

muy buen menú, la verdad es que lo explicas muy bien, me a encantado un saludo Gema!

Responder
Anónimo

Hola Gema.
Lo pongo aqui por que no sabia donde ponerlo, tengo 2 dudas.

tengo la plantilla tekka (blogger)

Quiero cambiar el tamaño de la columna derecha (sidebar), quiero que la columna derecha tenga la misma anchura que la parte principal del blog, osea que el blog tenga la misma anchura en la parte principal como en la columna derecha.

Otro cambio que me gustaria hacer es el de cambiar el tamaño de la letra del titulo.

¿Que tengo que modificar en la plantilla tekka?
En otras plantillas parece que es mas facil.

Muuuuchas gracias

Responder
manolo

muy bien me ha gustado mucho

Responder
sdjrp

gu-a-oooooo

que pedazo de maravilla!!! luego que consiga imagenes pongo eso en mi blog... gracias por el aportazo

Responder
Unknown

Bastante útil
:)
Gema, te envié un correo. Espero que cuando tengas un tiempo lo veas.

Responder
Anónimo

Gracias, guapa!! :)

Responder
The Monchos

Hola soy Julieta de La PLata. La verdad que es el primer lugar donde veoque explican bien este tema porque me meto en miles de paginas y nada.
La verdad que es justamente lo que quiero hacer esto de poner las pestañas como en una pagina web pero no me funciona, no se que es lo que hago mal. podrias mandarme un mail explicandomelo bien pongo todo el codigo donde decis pero no me aparece nada, lo unico que si me aparece son los botones pero a un costado y no entiendo como hacer para que por ej. HISTORIA me lleve a una pagina con la historia escrita no entiendo esa parte.
Me seria de gran utlidad tu ayuda porque no encuentro como solucinar este tema o alguien qu etenga buena onda y me tire una mano
desde ya muchas gracias!!!!!!!!


mi blog es
www.themonchos.blogspot.com


Ah! quisiera saber tambien como crear mi propia plantilla!!!!

Responder
The Monchos

+TE dejo mi mail eternajuli@hotmail.com soy la de arriba la del blog de the Monchos!

Responder
Liz Hopps

Oh creo que me sireve =)
Graciassssssssssssssssssssss

Besotes

Responder
Gem@

Gracias Jaime ;)

Anónimo para modificar es parte de la plantilla Tekka busca #main { y en width:67%; puedes cambiarlo a width:42%;
Luego en #sidebar { haces lo mismo y cambias width: 30%; por width: 45%; por con eso le quitamos espacio a las entradas y se lo añadimos a la sidebar.
Mira en vista previa es probable que tengas que ir ajustando hasta dividir a partes iguales.
Ya me dices que tal resulta ;)

Gracias Manolo ;)

Me alegra que te guste SDJRP :)

Voy a verlo CarLost no he tenido tiempo todavía :(

Le Petit Ecolier :)

Responder
Gem@

Hola Julieta, la verdad que en un mail te explicaría lo mismo que está aquí en la entrada porque no veo otra forma de explicarlo, lo que si podemos hacer que lo añadas al blog y yo veo donde está el error.
Para enlazar las pestañas hay que hacerlo de la siguiente forma...
<li><a href="url-enlace">Page 1</a></li>
Donde dice url-enlace debes añadir la dirección que aparece en la barra del navegador cunado vemos la página.
-Si se trata por ejemplo de una entrada del blog lo que haremos será clicar sobre el título de la entrada y copiar la dirección del navegador que vemos en ese momento.

Donde dice "Page 1" es el texto que vemos en la pestaña y que hará de enlace con la página a enlazar.

Con los siguientes Paje 3 y Paje 4 haremos la misma operación.
Con Paje 2 lo dejamos sin enlazar, podemos escribir algún texto si lo deseamos sustituyendo "Paje 2"

<h1 id="cst"><a href="url-enlace">Título del blog</a></h1>

Esta parte anterior es para el título, donde dice "Título del blog" escribimos el título y donde url-enlace la url de nuestro blog de esta forma al clicar sobre el título actualizamos la página.

Si con esto no lo solucionas ya digo que lo mejor es verlo añadido para ver donde está el problema.




Hola Liz ¿para el blog de amigos?

Responder
Anónimo

Hola Gem@.

Pasando a saludar. Viendo estos menus tan lindos, me encantan todos...

Ahora he cambiado el que tenia por un de lapices que hizo Pizcos, son muy cucos!!!.

Saludos y que andes muy bien!!!.

Responder
Liz Hopps

gemma no hay una forma de que las tabs salga de abajo de mi header?

si hay alguna entrada sugieremela...

Responder
Gem@

Tu menú es muy original Birdelo ;)

Liz ¿te refieres a añadir este menú con tabs con tu imagen o unas tabs simples debajo de tu cabecera?

Responder
Liz Hopps

SIIIIIIIIII para el blog de amigos..me guataria algo mas original que lenguetas, pero no se mucho y debo conformarme con lo mas simple y tu eres un sol por ayudarme =)

Responder
Gem@

Hay muchos menús Liz, tu me dices el que deseas añadir y yo te explico como hacerlo pero no puedo adivinar lo que deseas :O

Responder
Anónimo

hola Gema,
que tal? imagino que super liada...Te envie un mail para ver si podia instalar el menu de pestañas en un blog de prueba...desde entonces busco informacion de como instalarlo, leo los comentarios que te dejaron mas arriba con dudas y como las explicabas pero por mas que intento que funcionen las pestañas , nada...No se como hacer para que pinchando en cada una de las 4 pestañas que tengo en el blog salga la pagina correspondiente(que a su vez no se como personalizar o hacer...) He visto que pones que solo hay que poner la direcc de la pagina que quieres pero en mi caso es una pagina del blog que ni siquiera se como crear...
Te dejo el enlace para que le eches un vistazo
http://prueba-pruebasenelblog.blogspot.com/
y me digas si puedes cuales son los errores y como poder crear el menu de pestañas de esa forma
Una sonrisa y gracias de antemano

Responder
Gem@

El Club de los Parados lo que veo en tu plantilla es muy distinto a lo que está explicado aquí, no sé de dónde sacaste las explicaciones si me facilitas el enlace ganamos tiempo ;)
Si deseas añadir el de esta entrada no debes más que seguir los pasos :O
Siento no contestar tu mail, intento hacerlo por orden de llegada pero estos días ando mal de tiempo :(

Responder
Anónimo

Hola Gema,
finalmente lo que hice fue seguir las instrucciones de otra pagina que era conseguir el menu de otra forma. Vine a dejartelo en un coment y ya vi que me habias contestado...en el transito de escribirte y que me contestases decidi trastear un poco jeje y al final me quedo ese menu que ves, porque por mas que he intentado instalar este que explicas no me sale, me sale en vertical y en la sidebar no debajo del titulo...
Gracias por atenderme
Una sonrisa
P.d Es un privilegio poder contar con un blog como el tuyo que me sirve de mucho apoyo :-)

Responder
Gem@

El Club de los Parados cuando añadimos algo y nos sale en la sidebar es tan sencillo como arrastrar la etiqueta hasta el lugar que deseamos tenerlo :)
De todas formas me alegro que estés conforme con tu nuevo menú.

Responder
Gem@

Saludos Birdelo no te había visto :)

Responder
Marisabel

Gema esto lo venia buscando hace ya mucho tiempo pero no había manera de descifrarlo. Me interesa pero no hay manera de acertar, copio todo lo que dices en el lugar que hablas pero me sigue apareciendo en el lateral y en la cabecera no me deja ingresar el codigo que indicas. Puedes mirar a ver donde fallo y entre qué parte he de poner toda la codificacion para que aparezca las pestañas justo debajo del título?.
Este es el blog que utilizo de prueba:
http://indiceviandas.blogspot.com/
Gracias

Responder
Anónimo

Muchas gracias Gema.

Cambiando #main y #sidebar he logrado dividir el blog en dos partes iguales.

Gracias otra vez.

Responder
Gem@

Rosalisabel la etiqueta de la sidebar se puede arrastrar y situarla debajo del header, si no tienes opción de arrastrarla porque sólo hay espacio para el elemento cabecera puedes añadir un nuevo elemento siguiendo estos pasos
En tu caso es "widget en el header"
Me he dado cuenta que el menú no se visualiza bien con Explorer voy a modificar el código de la entrada y de paso solucionamos lo de las pestañas.

Me alegra que resultara anónimo ;)

Responder
Marisabel

Muchas gracias Gema voy a ver si modifico todo eso y en cuanto tenga un ratito acabar de montar la página.
Eres nuestro angel en este mundillo.

Responder
Gem@

Ya está solucionado todo Rosalisabel ;)

Responder
majka.

Hola, Gem@!

Como siempre... geniales tus ideas y clarísimas tus explicaciones!

Después de colocar el menú me he encontrado con algún problemilla...

1. Entre las tabs y la imagen de la cabecera, queda un pequeño espacio, que hacer perder mucho encanto al menú. No sé como se llama este espacio y, por lo tanto, no consigo modificarlo.

2. Al pasar el ratón por encima de las tabs no cambian de color... Ya la he liao!

Tal vez puedas hecharme un cablecito... (otro más, digo!).

Gracias por tu tiempo (este es el link del blog por si quieres ver de qué hablo: http://femlapetar.blogspot.com)

PD: Genial el concurso de navidad. Los alumnos andaban com locos! Hasta vinieron un día disfrazados de pesebre para tirarse una foto y ponerla en la cabecera, como adorno de Navidad! ajaj

Gracias de nuevo y un gran abrazo!

Responder
Gem@

» ¡Hola Majka! que bueno verte por aquí :)
Vi esa cabecera estaba linda representada por los alumnos y el menú sidebar también me gustó mucho, os dejé un comentario por allí felicitando las fiestas no sé si lo viste :)
Sobre el menú vamos aprobar a subir esas tabs, busca en la parte que añadiste a la plantilla donde dice:

ul.cst li a, ul.cst li.on {

y en padding: 0 8px 0 8px; sustitúyelo por:
padding: 0 8px 0 18px;

Veremos si con eso sube, mira en vista previa y si ves que aún no llega puedes ir variando ;)

Responder
majka.

Gema!
Estoy que me vuelvo loca! :S No hay forma de encontrar qué código tnego que retocar... El padding que modificamos, mueve los espacios de los títulos dentro de las tabs, pero no las sube.

Por otro lado sigo con una tab que está "marcada" y las demás inmóviles...

Creo haber seguido todos los pasos, pero está claro que algo he hecho mal.

Siento molestarte!

Un abrazo.

PD: Vimos tu mensaje! Eres un sol!

Responder
Gem@

Siento no haber contestado antes Majka no había viso este comentario :(
No he encontrado el último correo que me mandaste, quería decirte los pasos a seguir así que si te parece mándame un mail y le damos solución al problema ;)

Responder
Anónimo

Hola LINDA GEMA, dime en ese menu puedo utilizar la imagen de la cabecera en flash. gracias por tu tiempo

Responder
Estrella del avila 127

Hola LINDA GEMA, dime en ese menu puedo utilizar la imagen de la cabecera en flash. gracias por tu tiempo

Responder
Gem@

No sabría decirte Estrella del avila, si se trata simplemente de una imagen animada puede ser que si, pero si es código lo veo complicado :O

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top